"use client"

import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
import { useTheme } from "next-themes"
import React from "react"

import { Button } from "~/components/ui/button"
import { ny } from "~/lib/utils"

export const ModeToggle = React.forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<typeof Button> & { className?: string }
>(({ className, ...props }, ref) => {
   const { theme, setTheme } = useTheme()

   return (
      <Button
         ref={ref}
         variant="ghost"
         type="button"
         size="icon"
         className={ny("px-2", className)}
         aria-label="Toggle theme"
         onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
         {...props}
      >
         <SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
         <MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />
      </Button>
   )
})

ModeToggle.displayName = "ModeToggle"
